<template>
<div style="margin: 20px" >

  <div style="background:#F8FBFF;border-radius: 10px;padding: 40px">
  <el-tabs v-model="queryParams.safety_mechanism" @tab-click="handleClick" >
    <el-tab-pane v-for="(item,index) in institutions" :key="index" :label="item.safety_mechanism" :name="item.safety_mechanism">

      <el-tabs   >
        <el-tab-pane v-for="(item,index) in productDataList" @tab-click="handleClick" :key="index" :label="item.type" :name="item.safety_mechanism">

<!--              @selection-change="handleSelectionChange"

                     :row-class-name="tableRowClassName"
                     ref="multipleTable"
 -->

          <el-table  v-loading="loading" :data="item.children"
                     style="margin: 0 auto; border: 1px solid #E9EEF5;"  :header-cell-style="tableHeaderColor">
<!--              @select="handleSelect"
                     @row-click="handleRowClick"-->
<!--                <el-table-column type="selection" width="55" align="center" />-->
            <!--    <el-table-column label="数据编号" align="center" prop="id"/>-->
            <el-table-column label="" width="30" fixed>
              <template scope="scope">
                <el-radio :label="scope.row.id" v-model="templateRadio" @change.native="getTemplateRow(scope.row)">{{templateRadio1}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column label="方案名称" fixed min-width="100px" align="center" prop="name" >
              <!--      <template scope="scope">-->
              <!--        <el-radio :label="scope.row.id"  v-model="templateRadio" @change.native="getTemplateRow(scope.$index,scope.row)">{{scope.row.name}}</el-radio>-->
              <!--      </template>-->
            </el-table-column>
            <!--     :formatter="typeFormat"-->
            <el-table-column label="工种类型" min-width="100px" align="center" prop="type"/>
            <el-table-column label="伤亡责任限额" align="center" min-width="180px" prop="casualties">
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.casualties ? scope.row.casualties  + '元' : scope.row.casualties}}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="医疗责任限额" min-width="200px" align="center" prop="medical">
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.medical ? scope.row.medical  + '元' : scope.row.medical}}-->
<!--              </template>-->
            </el-table-column>
<!--            <el-table-column label="基础报价（元）" min-width="130px" align="center" prop="basic_price">-->
<!--&lt;!&ndash;              <template slot-scope="scope">&ndash;&gt;-->
<!--&lt;!&ndash;                {{scope.row.basic_price ? scope.row.basic_price  + '元' : scope.row.basic_price}}&ndash;&gt;-->
<!--&lt;!&ndash;              </template>&ndash;&gt;-->
<!--            </el-table-column>-->
            <el-table-column label="法律费用责任限额" min-width="170px" align="center" prop="legal">
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.legal ? scope.row.legal  + '万' : scope.row.legal}}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="累计责任限额" align="center" min-width="150px" prop="liability">
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.liability ? scope.row.liability  + '万' : scope.row.liability}}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="事故医疗费用免赔额/次/人" min-width="250px" align="center" prop="deductibles">
<!--              <template slot-scope="scope">-->
<!--                {{scope.row.deductibles ? scope.row.deductibles  + '万' : scope.row.deductibles}}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="保险费率" align="center" min-width="100px" prop="insurance_rate">
              <template slot-scope="scope">
                {{scope.row.insurance_rate ? scope.row.insurance_rate  + '%' : scope.row.insurance_rate}}
              </template>
            </el-table-column>
            <!--    <el-table-column label="保费" align="center" >-->
            <!--      <template slot-scope="scope">-->
            <!--        <el-button-->
            <!--            style="color: #666666"-->
            <!--            size="mini"-->
            <!--            type="text"-->
            <!--            v-hasPermi="['insurancemanagement:uploadPersonnelList:countPrice']"-->
            <!--                   >-->
            <!--          {{scope.row.count_price ? scope.row.count_price  + '元' : scope.row.count_price}}-->
            <!--        </el-button>-->

            <!--      </template>-->
            <!--    </el-table-column>-->
            <el-table-column label="标准比例" min-width="300px" align="center" prop="optional_price">
              <template slot-scope="scope">
                {{scope.row.optional_price ? scope.row.optional_price  + '%' : scope.row.optional_price}}
              </template>
            </el-table-column>
            <!--    <el-table-column label="序号" align="center" prop="sort">-->
            <!--    </el-table-column>-->
            <!--    <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />-->
          </el-table>


        </el-tab-pane>


      </el-tabs>

    </el-tab-pane>

  </el-tabs>
  </div>
<!--  v-if="item.children.length!=0"-->
  <div style="margin-top: 50px;text-align: center " >
    <el-button type="primary"   style="width: 200px" @click="getNextStep" >下一步</el-button>
  </div>

  <el-dialog   :visible.sync="dialogTableVisible" width="600px">
    <div slot="title" class="dialog-title">
     <i class="el-icon-warning-outline"></i>
      <span>消费者权益提示</span>
    </div>
    <div style="width: 500px;margin: 0 auto">
      <div>您已进入投保流程，请仔细阅读保险条款。为保障您的权益，您在销售页面的操作将被记录。</div>
      <div>承保保险公司：{{queryParams.safety_mechanism}}</div>
<!--      <div>保险服务机构（销售和协助理赔）：{{ Dname }}</div>-->
      <div>投保前请阅读：<span style="color:#f4c46e" @click="getNotice">客户告知书</span></div>
      <div style="display: flex;justify-content: flex-end">
        <el-button @click="dialogTableVisible=false">取消</el-button>
        <el-button style="background:#f4c46e;color: #FFFFFF" @click="getNextPage">已阅读并同意</el-button>
      </div>
    </div>

  </el-dialog>

</div>
</template>

<script>
import {listProductType} from "@/api/insurance/productType";
import {listProductData} from "@/api/insurance/productData";
import log from "@/views/monitor/job/log";
import { get_plan,get_plans,get_doc } from "@/api/insurancemanagement/uploadRersonnelList"
export default {
name: "index",
  data(){
  return{
    dialogTableVisible:false,//弹框

    get_plan:'',//保险机构id
    templateRadio:0,
    templateRadio1:'',
    // 显示搜索条件
    showSearch: true,
    // 0 禁用 1激活字典
    statusOptions: [],
    // 遮罩层
    loading: true,
    // 产品方案表格数据
    productDataList: [],
    // 对应工种字典
    typeOptions: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      safety_mechanism:'',
      pageSize: 10,
      pid: null,
      user_id:'',
      role_id:'',
      // name: null,
      // casualties: null,
      // medical: null,
      // basicPrice: null,
      // optionalPrice: null,
      // status: null,
      type: null,
      // 总条数
    },
    total: 0,
    programme:{},
    id:'',//方案名称的id
    //保险机构
    institutions:[],
    Dname:'',//单位名称
    pdf:'',//告知书链接
    multipleSelection:[],//用来存储table的数据
  }
  },
  methods:{
    // 选中背景色
    // tableRowClassName({ row }) {
    //   // console.log('rowwww',row)
    //   // 选中背景色
    //   return row.className;
    // },

// 点击整行选中
//     clickRow(row, event, column) {
//       if (row.className === "normal") {
//         row.className = "tableSelectedRowBgColor";
//       } else {
//         row.className = "normal";
//       }
//       this.$refs.multipleTable.toggleRowSelection(row);
//     },
    // 手动点击勾选框触发的事件
    // handleSelect(selection, row) {
    //   // selection,row  传递两个参数，row直接是对象
    //   // 只传一个参数得到的是数组
    //   if (row.className === "normal") {
    //     row.className = "tableSelectedRowBgColor";
    //   } else {
    //     row.className = "normal";
    //   }
    // },


    /* 修改表头颜色 */
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #304156;color: #fff;font-weight: 400;font-family: Microsoft YaHei;'
      }
    },
    handleSelectionChange(val){
      // console.log('val',val)
      // if(val.length>1){
      //   this.$refs.multipleTable.clearSelection()
      //   this.$refs.multipleTable.toggleRowSelection(val.pop())
      // }else{
      //   this.multipleSelection=val.pop()
      // }
    },
    handleRowClick(row,column,event){
      // this.$refs.multipleTable.toggleRowSelection(row)
    },


    //点击保险机构
    handleClick(){
       // console.log('activeName',this.activeName)
      this.getPlan()
    },
    //点击已阅读并同意跳转到下一页去投保
    getNextPage(){
      var obj={
        id:this.id
      }
      this.$router.push({
        path:'insure/index',
        query:{
          ids:obj
        }
      })

    },
    //选择对应的条件
    getTemplateRow(item){
      this.programme=item;

      this.id=item.id;
      // this.productDataList.forEach(v=>{
      //   v.children.filter(vi=>{
      //     vi.className='tableSelectedRowBgColor'
      //     console.log('5555555555',vi.id,item.id)
      //     if (vi.id==item.id){
      //
      //       if(item.className=='normal'){
      //         console.log('11111111111')
      //         item.className = "tableSelectedRowBgColor"
      //         vi.className = "tableSelectedRowBgColor"
      //       }
      //     }else{
      //       item.className='normal'
      //       vi.className='normal'
      //       console.log('88888888888', vi.className, item.className)
      //     }
      //   })
      // })
      // if (row.className === "normal") {
      //   row.className = "tableSelectedRowBgColor";
      // } else {
      //   row.className = "normal";
      // }

      // console.log('item',item)
    },
    //点击查看告知书
    getNotice(){
    window.open(this.pdf)
    },
    //点击保险机构获取公众类型
    getPlan(){
      // console.log('queryParams',this.queryParams)
      this.loading = true;
      get_plan(this.queryParams).then(res=>{
        // console.log('种类',res)

        if (res.code==1){
          this.loading = false;
          this.productDataList=[]
          this.productDataList=res.data;
          // this.productDataList.forEach(v=>{
          //   v.children.forEach(vi=>{
          //     vi.className='normal'
          //   })
          // })
               console.log('productDataList',this.productDataList)
          // this.total = res.data.count;
        }

      })
    },

    //点击下一步显示弹框
    getNextStep(){
      if (this.id==''){
        this.$message.error('请选择方案');
      }else{
        this.dialogTableVisible=true;

        this.getDoc();
      }

    },
    //获取保险服务
    getDoc(){

      get_doc(this.id).then(res=>{
        if(res.code==1){
           this.Dname=res.data.name;
           this.pdf=res.data.pdf

        }
        // console.log('单位',res)
      })
    },
    // 对应工种字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    getQuery1(){
      get_plans(this.queryParams.user_id,this.queryParams.role_id).then(res=>{
        this.institutions = res.data;
        if(this.institutions.length!=0)
        this.queryParams.safety_mechanism= this.institutions[0].safety_mechanism;
        this.getPlan()

        // console.log('res32534',res)
      })
    },

  },
  created() {
    this.queryParams.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    var info=JSON.parse(localStorage.getItem('userInfo'));
    if (info.roles.length!=0){
      this.queryParams.role_id=info.roles[0].roleId
    }

    // console.log('info',info)
      this.getQuery1();
    // this.getDicts("Insurance_institutions").then(res => {
    //   this.institutions = res.data;
    // })
    this.getDicts("industry_type").then(res => {
      this.typeOptions = res.data;
    })
    this.getDicts("common_status").then(res => {
      this.statusOptions = res.data;
    })

  }

}
</script>

<style  lang="scss">
.dialog-title{
  display: flex;
  align-items: center;

  i{
    color: #f4c46e;
    font-size: 20px;
    margin-right: 15px;
    font-weight: bold;
  }

}


</style>
